<template>
  <div>
    <el-dialog title="高级筛选" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px" top="40px"
      class="add" :before-close="handleClose">
      <div class="">
        <el-row v-for="(item, index) in searchList" :key="index" class="mt15 mb15 flex_cen">
          <!-- 条件名 -->
          <el-col :span="6">
            <el-select v-model="searchList[index].screening" class="w200" size="small" value-key="id"
              @change="(val) => handleChangeScreening(val, index)">
              <el-option v-for="val in options.type" :key="val.id" :label="val.label" :value="val" />
            </el-select>
          </el-col>
          <!-- 范围 -->
          <el-col v-if="searchList[index].formType != 'map_address'" :span="6">
            <el-select v-model="searchList[index].condition" class="w200" size="small"
              @change="(val) => selected(val, index)">
              <el-option v-for="val in searchList[index].typeOption" :key="val.id" :label="val.name"
                :value="val.condition" />
            </el-select>
          </el-col>
          <!-- 条件值 -->
          <el-col :span="6">
            <div class="flex_cen">
              <!-- 输入框 -->
              <el-input v-if="
                  searchList[index].formType === 'text' &&
                    searchList[index].condition != 'range' &&
                    searchList[index].condition != 'isNull' &&
                    searchList[index].condition != 'isNotNull'
                " v-model="searchList[index].inputValue" class="w300" size="small" placeholder="请输入内容" />

              <!-- 单选选择下拉框 -->
              <el-select v-else-if="
                  searchList[index].formType === 'select_check' &&
                    searchList[index].condition != 'isNull' &&
                    searchList[index].condition != 'isNotNull'
                " v-model="searchList[index].selectValue" multiple value-key="id" class="w200" size="small">
                <el-option v-for="val in searchList[index].selectOption" :key="val.id" :label="val.name" :value="val" />
              </el-select>
              <div v-else-if="
                  searchList[index].formType === 'dict_check' &&
                    searchList[index].condition != 'isNull' &&
                    searchList[index].condition != 'isNotNull'
                ">
                <el-cascader v-model="searchList[index].selectArray" :options="searchList[index].selectOption" :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                  }" :show-all-levels="false" class="input" size="small" filterable clearable @change="
                    (val) => dictChoose(val, searchList[index].name, index)
                  " />
              </div>
              <div v-else-if="searchList[index].formType === 'map_address'">
                <!-- 省市区下拉选择 -->
                <region class="w300" @getRegion="getRegion" />
              </div>
              <!-- 区间 -->
              <div v-else-if="searchList[index].condition === 'range'" class="flex_cen">
                <el-input v-model="searchList[index].minInputValue" size="small" placeholder="最小值" />
                至
                <el-input v-model="searchList[index].maxInputValue" size="small" placeholder="最大值" />
              </div>
              <i class="el-icon-error ml15" @click="deleteRemove(index)" />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="ml10 colorRed fz12">筛选条件中有重复项!</div> -->
      <div>
        <el-button type="text" class="right" @click="addition"><i class="el-icon-plus" /> 添加筛选条件</el-button>
      </div>
      <div class="row_confirm">
        <el-button type="primary" class="right" @click="handleSearchDetermine">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
class Search {
  constructor() {
    this.name = ''; // 条件name值
    this.condition = ''; // 范围
    this.value = []; // 传给后端的参数值(array)
    this.formType = ''; // 条件类型值(input,select,map_address)
    this.screening = {};
    this.typeOption = []; // 范围选项
    this.selectOption = []; // 参数值选项(select)
    this.selectArray = [];
    this.inputValue = ''; // 参数值(input)
    this.selectValue = ''; // 参数值(select)
    this.minInputValue = ''; // 参数值(最小值)
    this.maxInputValue = ''; // 参数值(最大值)
  }
}
class Options {
  constructor(val) {
    this.type = [];
    this.relation = {
      1: { name: '等于', id: 1, condition: 'is' },
      2: { name: '不等于', id: 2, condition: 'isNot' },
      3: { name: '包含', id: 3, condition: 'contains' },
      4: { name: '不包含', id: 4, condition: 'notContains' },
      5: { name: '为空', id: 5, condition: 'isNull' },
      6: { name: '不为空', id: 6, condition: 'isNotNull' },
      7: { name: '大于等于', id: 7, condition: 'egt' },
      8: { name: '小于等于', id: 8, condition: 'elt' },
      9: { name: '区间', id: 9, condition: 'range' },
      10: { name: '早于', id: 10, condition: 'lt' },
      11: { name: '晚于', id: 11, condition: 'gt' },
      12: { name: '介于', id: 12, condition: 'between' },
      13: { name: '不介于', id: 13, condition: 'nobetween' }
    };
  }
}
import region from '@/components/Region';
export default {
  name: 'Screening',
  components: {
    region
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    handleType: {
      type: String,
      default: 'client'
    },
    searchType: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      options: new Options(this.handleType),
      dictionary: {}, // 字典
      searchList: [new Search()],
      labelList: ['first', 'second', 'third'],
      region: {
        province_id: '', // 省
        city_id: '', // 市
        district_id: '' // 区
      } // 省市区回显
    };
  },
  mounted () { },
  methods: {
    // 字典
    getDict (data) {
      this.dictionary = data;
      this.options.type = this.searchType;
    },
    // 切换条件
    handleChangeScreening (val, index) {
      this.searchList[index].condition = val.scope.map(
        (item) => this.options.relation[item]
      )[0].condition;
      this.searchList[index].selectValue = '';
      this.searchList[index].inputValue = '';
      this.searchList[index].name = val.name;
      this.searchList[index].formType = val.formType;
      this.searchList[index].typeOption = val.scope.map(
        (item) => this.options.relation[item]
      );
      if (val.formType === 'select_check' || val.formType === 'dict_check') {
        const dictOption = this.dictionary[val.name];
        this.searchList[index].selectOption = dictOption
          ? dictOption.map((option, index) => {
            return {
              name: option.name || option.item,
              id: option.id || index,
              children: option.children
            };
          })
          : val.options;
      }
    },
    // 关闭弹框
    handleClose () {
      this.$emit('handleClose');
      this.searchList = [new Search()];
    },
    // 添加筛选条件
    addition () {
      this.searchList.push(new Search());
    },
    // 筛选确定
    handleSearchDetermine () {
      let searchObject = {};
      this.searchList = this.searchList.filter(({ name }) => name);
      this.searchList.forEach((val) => {
        searchObject[val.name] = {
          name: val.name,
          condition: val.condition,
          form_type: val.formType,
          value: val.value || ''
        };
        if (val.formType === 'text' && val.condition != 'range') {
          searchObject[val.name].value = [val.inputValue];
        } else if (val.condition === 'range') {
          searchObject[val.name].value = [val.minInputValue, val.maxInputValue];
        } else if (
          val.formType === 'select_check' &&
          (val.name === 'source_type' ||
            val.name === 'source_type_son' ||
            val.name === 'status')
        ) {
          searchObject[val.name].value =
            val.selectValue.length > 0
              ? val.selectValue.map((item) => item.id)
              : [''];
        } else if (
          val.formType === 'select_check' &&
          (val.name != 'source_type' ||
            val.name != 'source_type_son' ||
            val.name != 'status')
        ) {
          searchObject[val.name].value =
            val.selectValue.length > 0
              ? val.selectValue.map((item) => item.name)
              : [''];
        } else if (val.formType === 'map_address') {
          searchObject[val.name].value = this.region;
        }
        if (
          val.formType != 'map_address' &&
          val.condition != 'isNull' &&
          val.condition != 'isNotNull' &&
          searchObject[val.name].value[0] == ''
        ) {
          val.isError = true;
        } else if (
          val.formType == 'map_address' &&
          searchObject[val.name].value.province_id == ''
        ) {
          val.isError = true;
        } else {
          val.isError = false;
        }
      });
      if (this.searchList.some((val) => val.isError)) {
        this.$message.error('筛选条件不能为空');
      } else {
        this.handleClose();
        console.log(searchObject);
        this.$emit('determine', searchObject);
      }
    },
    // 字典选择
    dictChoose (val, name, index) {
      console.log(name);
      if (name.indexOf('source') > -1) {
        this.searchList[index].name =
          'source_' + this.labelList[val.length - 1] + '_id';
        this.searchList[index].value = [val[val.length - 1] + ''];
        console.log(val, name, this.searchList[index]);
      } else if (name.indexOf('level') > -1) {
        this.searchList[index].name =
          'level_' + this.labelList[val.length - 1] + '_id';
        this.searchList[index].value = [val[val.length - 1] + ''];
      } else if (name.indexOf('type_name') > -1) {
        this.searchList[index].name =
          'type_' + this.labelList[val.length - 1] + '_id';
        this.searchList[index].value = [val[val.length - 1] + ''];
      } else if (name.indexOf('industry_name') > -1) {
        this.searchList[index].name =
          'industry_' + this.labelList[val.length - 1] + '_id';
        this.searchList[index].value = [val[val.length - 1] + ''];
      }
    },
    // 获取地区
    getRegion (region) {
      const { province_id, city_id, district_id } = region;
      this.region.province_id = province_id;
      this.region.city_id = city_id;
      this.region.district_id = district_id;
    },
    // 删除当前条件
    deleteRemove (index) {
      this.$confirm('您确定要删除这一条数据吗??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.searchList.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 范围条件
    selected (val, index) {
      this.searchList[index].condition = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  //   background: #f5f6f9;
  ::v-deep.el-dialog {
    // height: calc(100vh - 300px);
    overflow-y: auto;
    top: 80px;
  }
  ::v-deep.el-dialog__body {
    padding: 0px 20px 20px;
    position: relative;
  }
  .dialog-footer {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
}
.row_confirm {
  display: flex;
  justify-content: end;
}
</style>
